<template>
  <div v-if="content" class="bottom-message-bar"><span>通知：{{content}}</span></div>
</template>

<script>
  export default {
    name: 'bottom-message-bar',
    props: ['classId'],

    data () {
      return {content: ''}
    },
    methods: {
      update: function () {
        // var that = this

        if (this.classId) {
          // 紧急通知
          // c.get({
          //   url: '/Mccard/Ajax/GetClassNotice?classid=' + that.classId,
          //   success: function (d) {
          //     debugger
          //     that.content = (d.data && d.data.content) || ''
          //
          //     if (that.content) {
          //       Vue.nextTick(function () {
          //
          //         var el = that.$el
          //
          //         textMarquee({
          //           eBox: el,
          //           eText: el.children[0]
          //         })
          //
          //       })
          //     }
          //   }
          // })
        }
      }
    },
    watch: {
      classId: function () {
        this.update()
      }
    }
  }
</script>

<style>
  .bottom-message-bar {
    height: 66px;
    color: #fff;
    position: absolute;
    bottom: 0;
    font-size: 30px;
    background-color: rgba(42, 71, 80, 0.82);
    width: 100%;
    white-space: nowrap;
    line-height: 2.2;
    overflow: hidden;
    box-sizing: border-box;
  }

  .bottom-message-bar span {
    padding: 0 10px;
  }

  .bottom-message-bar[v-cloak] {
    display: none;
  }
</style>
